<template>
  <div class="box" :style="cssVars">
    <div class="box-top">
      <div class="box-title font-lan-l">{{title}}</div>
      <img class="img" :src="boxTop" alt="">
    </div>
    <div class="boxCon">
      <slot></slot>
    </div>
    <img class="img" :src="botBottom" alt="">
  </div>
</template>

<script lang="ts">
import { data } from "jquery";
import {
  ref,
  computed,
  defineComponent,
} from "vue";

// 声明类型
const PropsType = {
  title: {
    type: String,
    default: '',
    require: true
  },
  width: {
    type: Number,
    default: 480,
    require: true
  }
} as const

export default defineComponent({
  name:'box',
  props: PropsType,
  components: {},
  setup(props, context) {
    //变量
    const boxTop = require("@/assets/img/box-top.png");
    const botBottom = require("@/assets/img/box-bottom.png");
    const cssVars = computed(() => {
      return {
        "--width" : props.width+ 'px'
      }
    })

    // return
    return {
      boxTop,
      botBottom,
      cssVars
    };
  },
  
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
.box{
  width: var(--width);
  .box-top{
    position: relative;
    .box-title{
      position: absolute;
      left: 10%;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .boxCon{
    background: rgba(20,69,102,0.6);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    padding: 8px 16px;
  }
  .img{
    vertical-align: top;
    width: 100%;
  }
}

</style>
